<template>
  <div class="home">
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="24">
            <h3 class="h3-title">
              <span tooltipicon="help" class="nb-rc-text product-title">
                <span class="the-text">我的应用</span>
              </span>
            </h3>

            <my-application />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="WidgetHomeProductMy-detailContainer-3W8nd">
              <h3 class="h3-title">
                <span tooltipicon="help" class="nb-rc-text product-title">
                  <span class="the-text">开发教程</span>
                </span>
              </h3>
              <div
                style="
                  position: relative;
                  overflow: hidden;
                  width: 100%;
                  height: 250px;
                "
              >
                <div
                  style="
                    position: absolute;
                    inset: 0px;
                    overflow: scroll;
                    margin-right: -17px;
                    margin-bottom: -17px;
                  "
                >
                  <ul class="product_list thm-uglier">
                    <li
                      class="product_list_li"
                      v-for="(item, index) in learnDocumentArr"
                      :key="index"
                    >
                      <div class="text-title">
                        <a :href="item.link" target="_blank">
                          {{ item.title }}
                        </a>
                        <span class="text-icons"
                          ><i class="fas fa-chevron-right"></i
                        ></span>
                      </div>
                      <div class="text-descript">
                        {{ item.desc }}
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <el-aside width="30%">
        <aside-count />
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import MyApplication from "./myApplication.vue";
import AsideCount from "./asideCount.vue";

export default {
  name: "index",
  components: {
    MyApplication,
    AsideCount,
  },
  data() {
    return {
      learnDocumentArr: [
        {
          title: "生成器使用说明",
          link: "http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/",
          status: "0",
          desc: "让所有参与开发的研发人员所创建的服务都是基于同一套框架和代码结构",
        },
        {
          title: "管理后台集成",
          link: "http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/15_%E7%AE%A1%E7%90%86%E5%90%8E%E5%8F%B0%E9%9B%86%E6%88%90.html",
          status: "0",
          desc: "自动生成基础的CURD工程，一健生成一个基础的后台，低代码集成",
        },
        {
          title: "多种发布集成",
          link: "http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/18_%E5%A4%9A%E7%A7%8D%E5%8F%91%E5%B8%83%E9%9B%86%E6%88%90.html",
          status: "0",
          desc: "支持fastjar/docker/k8s多种环境的发布，最小依赖，原子性，支持大中小项目的发布场景",
        },
        {
          title: "权限服务集成",
          link: "http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/07_%E6%9D%83%E9%99%90%E7%94%A8%E6%88%B7%E9%9B%86%E6%88%90.html",
          status: "0",
          desc: "自动集成基础的权限认证后台，集成默认的多种功能，统一账号和认证",
        },
        {
          title: "容器化集成",
          link: "http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/09_%E5%AE%B9%E5%99%A8%E5%8C%96%E9%9B%86%E6%88%90.html",
          status: "0",
          desc: "一健集成容器，支持多种容器仓库，快速支持云原生，容器云，无缝接入平台",
        },
        {
          title: "多种微服务集成",
          link: "http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/08_%E5%BE%AE%E6%9C%8D%E5%8A%A1%E9%9B%86%E6%88%90.html",
          status: "0",
          desc: "集成dubbo/cloud/网格等多种微服务方案",
        },
      ],
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
@import url("http://static.cloud.linesno.com/asserts/vendors/fontawesome/css/all.css");

.homeHeader {
  position: relative;
  box-sizing: border-box;
  padding: 24px 24px 0;
  background-color: #fff;
  box-shadow: 0 1px 0 0 #e3e4e6;
  z-index: 1;
}

.homeHeader h1 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #333;
  line-height: 24px;
}

.app-container {
  background-color: #fafafa;
}

.widget-title {
  font-size: 14px;
  color: #333;
  line-height: 24px;
  font-weight: 400;
  width: 100%;
}

.app-icon {
  width: 32px;
  height: 32px;
  position: relative;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 2px;
  background: #fff;
  padding: 20px !important ;
  padding-left: 20px !important ;
  padding-right: 20px !important ;
  border: var(--card-border-width, 1px) var(--card-border-style, solid)
    var(--card-border-color, #e3e4e6);
}

.el-col-8 {
  width: calc(33.3333333333% - 10px);
  margin-left: 10px;
}

.widget-bulletin-list .item {
  height: 32px;
  line-height: 32px;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 12px;

  a {
    color: #555;
  }
}

.product_list_li:nth-child(3),
.product_list_li:nth-child(6) {
  border-right: 0px;
}

.product_list_li {
  width: 33% !important;
  padding: 16px !important ;
  border-radius: 0px !important ;
  border-right: 1px solid #eee;

  .text-title {
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #333;
    letter-spacing: 0;
    line-height: 24px;
  }

  .text-descript {
    margin-top: 8px;
    opacity: 0.7;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #333;
    letter-spacing: 0.37px;
    line-height: 20px;
  }
}

.widget-bulletin-list {
  .line {
    position: absolute;
    left: -16px;
    right: -16px;
    height: 1px;
    background-color: #e3e4e6;
  }
  .pin {
    position: relative;
    margin-bottom: 15px;
    margin-top: 15px;

    .msg {
      padding: 8px 12px;
      line-height: 18px;
      color: #333;
      font-size: 12px;
      background-color: #eff3f8;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      margin-bottom: 16px;
    }
  }
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.next-col-4 {
  -ms-flex: 0 0 16.66667%;
  -webkit-flex: 0 0 16.66667%;
  flex: 0 0 16.66667%;
  width: 16.66667%;
  max-width: 16.66667%;
  float: left;
}

.subtitle {
  font-weight: 500;
  font-size: 12px;
  color: #666;
  line-height: 20px;
  margin: 16px 0 8px;
}

.thm-uglier {
  list-style: none;
  margin: 0;
  padding: 0;
}

.product_list {
  a {
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: #333;
    transition: all 250ms linear;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.product_list > li {
  padding: 0 8px 8px 0;
  overflow: hidden;
  flex: none;
  width: 25%;
  float: left;
  border-radius: 4px;
  font-size: 12px;

  a {
    i {
      display: none;
      border: 1px solid #dedede;
      border-radius: 14px;
      width: 28px;
      height: 28px;
      text-align: center;
    }
  }

  .WidgetHomeProductMy-product_name-TNtW6 {
    flex: 1;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.h3-title {
  font-size: 17px;
  font-weight: 600;
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 16px;
}

.text-icons {
  float: right;
  margin-right: 10px;
  font-size: 16px;
  font-weight: 200;
  color: #ccc;
}

li.product_list_li.count-li {
  background: url(https://img.alicdn.com/tfs/TB1uQ8uVLb2gK0jSZK9XXaEgFXa-816-160.png)
    0% 0% / 100% 100% no-repeat;
  width: calc(50% - 16px) !important;
  height: 140px;
  border-right: 0px;
  border-radius: 5px !important;
  margin: 0px 0px 16px 16px !important;
}

.count-text-button > button {
  padding: 0 16px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  border-width: 1px;
  border-style: solid;
  background-color: #005bd4;
  border-color: transparent;
  margin-top: 20px;
  color: #fff;
  border-radius: 3px;
}

.el-aside {
  background: #fff !important ;
  margin-top: 12px !important;
  padding-left: 0px;
  padding-right: 10px;
}
</style>


